<template>
	<view>
		<u-navbar back-icon-color="#FFFFFF" :border-bottom="false" title-color="#FFFFFF" :background="background">
		</u-navbar>
		<view class="top"></view>
		<view class="div"></view>
		<view class="content">
			<view class="form">
				<view class="title">
					<view class="text">
						填写表单
					</view>
					<image src="../static/x2.png" class="img"></image>
				</view>
				<view class="down">
					<view class="help" @click="toPage('help')">
						<image src="../static/x4.png" mode=""></image>
						申请规则
					</view>
					<view class="list">
						<view class="name">
							<view class="icon"></view>
							<view class="text">
								申请类别
							</view>
						</view>
						<view class="inp" @click="show=true">
							<input type="text" v-model="type" :disabled="true" placeholder="选择申请类别"
								placeholder-class="pla" />
							<image src="../static/x3.png" mode=""></image>
							<u-select v-model="show" @confirm="confirm" :list="list"></u-select>
						</view>
					</view>
					<view class="list">
						<view class="name">
							<view class="icon"></view>
							<view class="text">
								申请人
							</view>
						</view>
						<view class="inp">
							<input type="text" v-model="name" placeholder="输入申请人姓名" placeholder-class="pla" />
						</view>
					</view>
					<view class="list">
						<view class="name">
							<view class="icon"></view>
							<view class="text">
								联系方式
							</view>
						</view>
						<view class="inp">
							<input type="text" v-model="telphone" placeholder="输入联系方式" placeholder-class="pla" />
						</view>
					</view>
					<view class="list">
						<view class="name">
							<view class="icon"></view>
							<view class="text">
								团队玩家预期
							</view>
						</view>
						<view class="inp">
							<input type="text" v-model="plan_number" placeholder="输入团队玩家预期数" placeholder-class="pla" />
						</view>
					</view>
					<view class="button">
						<u-button class="b1" type="primary" @click="apply">立即报名</u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				background: {
					'background': 'transparent'
				},
				show: false,
				list: [{
						value: '高级合伙人',
						label: '高级合伙人'
					},
					{
						value: '大区合伙人',
						label: '大区合伙人'
					}
				],
				type: "",
				name: "",
				telphone: "",
				plan_number: "",
				timeout: 1000,
			}
		},
		onLoad(option) {
			than = this;
		},
		methods: {
			confirm(e) {
				than.type = e[0].label
			},
			apply() {
				if (!than.type) {
					than.toast("未选择类别")
					return false
				}
				if (!than.name) {
					than.toast("未填写申请人")
					return false
				}
				if (!than.telphone) {
					than.toast("输入联系方式")
					return false
				}
				if (!than.plan_number) {
					than.toast("输入团队玩家预期数")
					return false
				}
				this.$u.debounce(this.getResult, this.timeout, false);
			},
			getResult() {
				than.post('api/Novice_reward/apply', {
					type: than.type,
					name: than.name,
					telphone: than.telphone,
					plan_number: than.plan_number
				}, function(data) {
					than.toast(data)
					setTimeout(function() {
						uni.navigateBack();
					}, 1500);
				})
			},
		}
	}
</script>

<style lang="less">
	.top {
		width: 100%;
		height: 1013rpx;
		position: fixed;
		top: 0;
		background-image: url(../static/x1.png);
		background-size: 100% 100%;
	}

	page {
		background: #223663;
	}

	.div {
		height: 900rpx;
	}

	.content {
		width: 690rpx;
		margin: auto;
		position: relative;
		z-index: 10;
		background: #3C5081;
		padding: 28rpx 0;

		.form {
			width: 630rpx;
			margin: auto;

			.button {
				margin-top: 74rpx;
				padding-bottom: 42rpx;

				.b1 {
					width: 484rpx;
					height: 98rpx;
					background: linear-gradient(0deg, #FFDCA5 0%, #EEB674 100%);
					box-shadow: 0px 9rpx 21rpx 0px rgba(239, 184, 118, 0.45);
					border-radius: 49rpx;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #663D2A;
				}
			}

			.title {
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				height: 115rpx;
				background: linear-gradient(0deg, #DAB693 0%, #CA8F6F 100%);
				box-shadow: 0px 6rpx 27rpx 0px rgba(204, 147, 114, 0.38);
				border-radius: 10rpx 10rpx 0 0;

				.text {
					font-size: 54rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #FFFFFF;
					text-shadow: 0px 6rpx 5rpx rgba(204, 147, 114, 0.38);
				}

				.img {
					position: absolute;
					width: 460rpx;
					height: 43rpx;
				}
			}

			.down {
				background: #FFFFFF;
				border-radius: 0 0 10rpx 10rpx;
				padding-top: 24rpx;

				.help {
					margin-left: 460rpx;
					display: flex;
					align-items: center;
					height: 52rpx;
					width: 170rpx;
					background: linear-gradient(90deg, #FEDBA3, #F1BF7F);
					border-radius: 26rpx 0px 0px 26rpx;

					image {
						margin: 0 16rpx;
						width: 25rpx;
						height: 25rpx;
					}

					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.list {
					margin: 0 36rpx 13rpx;

					.name {
						display: flex;
						align-items: center;
						margin-left: 19rpx;
						height: 95rpx;

						.icon {
							width: 18rpx;
							height: 18rpx;
							background: #FF5B07;
							border-radius: 50%;
							margin-right: 15rpx;
						}

						.text {
							font-size: 36rpx;
							font-family: Source Han Sans CN;
							font-weight: bold;
							color: #223663;
						}
					}

					.inp {
						width: 555rpx;
						height: 82rpx;
						background: #F0EEEF;
						border-radius: 41rpx;
						position: relative;
						display: flex;
						align-items: center;

						input {
							height: 100%;
							line-height: 82rpx;
							padding-left: 50rpx;
						}

						image {
							right: 37rpx;
							position: absolute;
							width: 20rpx;
							height: 13rpx;
						}
					}
				}
			}
		}
	}
</style>
